<template>
    <div class="user_info">
        <div class="base_header">
            <img @click="goBack()" class="back" src="../../assets/img/back.png" alt="">添加新地址
            <span class="fr save" @click="doCommit()">保存</span>
        </div>
        <div class="item_info border1" style="padding: 15px">
            <span class="s3">收货人</span>
            <span class="s2"><input type="text" v-model.trim="address.receiver"></span>
        </div>
        <div class="item_info border1" style="padding: 15px">
            <span class="s3">联系电话</span>
            <span class="s2"><input type="text" v-model.trim="address.userPhone"></span>
        </div>
        <div class="item_info border1" id="select_contact" style="padding: 15px">
            <span class="s3">所在地区</span>
            <span class="s2" data-province-code="" data-city-code="" data-district-code="" id="show-contact"></span>
            <img src="../../assets/img/goods/arrow.png" alt="">
        </div>
        <div class="item_info mb10" style="padding:15px 15px 0">
        	<textarea name="" rows="" cols="" placeholder="请填写详细地址，不少于5个字" v-model.trim="address.detailAddr"></textarea>
        </div>
        <div class="check_default f14" style="padding: 15px">
            <img v-if="!isDefault" src="../../assets/img/order/radio.png" @click="checkDefault(true)"><img
                v-if="isDefault" src="../../assets/img/order/radio_active.png" @click="checkDefault(false)">设为默认 
        </div>
    </div>
</template>

<style>
    @import url("./user-info.css");
    @import url("../../../static/js/iosSelect.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'

    export default {
        data() {
            return {
                isDefault: false,
                address: {
                    cityId: "",
                    defaultFlag: "",
                    detailAddr: "",
                    provinceId: "",
                    receiver: "",
                    regionId: "",
                    userPhone: ""
                }
            }
        },
        created() {
             window.scrollTo(0,0);
        },
        mounted() {
            // 选择地址初始化
            let selectContactDom = $('#select_contact');
            let showContactDom = $('#show-contact');
            let _this = this;
            selectContactDom.bind('click', function () {
                let sccode = showContactDom.attr('data-city-code');
                let scname = showContactDom.attr('data-city-name');
                let oneLevelId = showContactDom.attr('data-province-code');
                let twoLevelId = showContactDom.attr('data-city-code');
                let threeLevelId = showContactDom.attr('data-district-code');
                let iosSelect = new IosSelect(3,
                    [iosProvinces, iosCitys, iosCountys],
                    {
                        title: '地址选择',
                        itemHeight: 35,
                        relation: [1, 1, 0, 0],
                        oneLevelId: oneLevelId,
                        twoLevelId: twoLevelId,
                        threeLevelId: threeLevelId,
                        callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                            showContactDom.attr('data-province-code', selectOneObj.id);
                            showContactDom.attr('data-city-code', selectTwoObj.id);
                            showContactDom.attr('data-district-code', selectThreeObj.id);
                            showContactDom.html(selectOneObj.value + '' + selectTwoObj.value + '' + selectThreeObj.value);
                            _this.address.cityId = selectTwoObj.id;
                            _this.address.provinceId = selectOneObj.id;
                            _this.address.regionId = selectThreeObj.id;
                        }
                    });
            });
        },
        methods: {
            goBack() {
                this.$router.goBack()
            },
            checkDefault(status) {
                this.isDefault = status
            },
            doCommit() {
                if (this.isDefault) {
                    this.address.defaultFlag = "1"
                } else {
                    this.address.defaultFlag = "0"
                }
                if (!this.address.receiver) {
                    Layer.showMsg("请输入收货人")
                    return
                }
                if (!Validate.phoneRule(this.address.userPhone)) {
                    Layer.showMsg("手机格式不正确")
                    return
                }
                if (!this.address.cityId || !this.address.provinceId || !this.address.regionId) {
                    Layer.showMsg("请输入所在地")
                    return
                }
                if (!this.address.detailAddr||this.address.detailAddr.length<5) {
                    Layer.showMsg("请填写详细地址，不少于5个字")
                    return
                }
                let url = API.serviceDomain + API.personAddressModify;
                let params = []
                params.push(this.address)
                this.$http.post(url,params).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            Layer.showMsg("添加成功");
                            this.$router.replace({path: '/set_local'});
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            }
        }

    }
</script>
